<template>
  <div>
    <div>
       <van-sticky>
          <van-nav-bar
            title="商品详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            class="top"
          />
       </van-sticky>
      
      <div class="cent">
          <van-image
            width=100%
            height="330"
            :src="this.product.coverImg"
          />
          <van-panel class="zz">
            <div class="price">￥{{this.product.price}}</div>
            <div class="name">{{this.product.name}}</div>
            <div class="desc">{{this.product.descriptions}}</div>
            <van-stepper class="num" integer v-model="quantity" :min="1" :max="product.quantity" />
          </van-panel>
          <van-cell class="fh" title-class="tit1" icon="location-o" title="发货：北京 赠送运费险" value="月销：160" size="large" />

          <van-cell-group>
            <van-cell class="cx" value="促销：满400立减100元" is-link />
            <van-cell class="cx" value="服务：服务后5天内发货|无忧退货" is-link />
            <van-cell class="cx" value="参数：品牌 尺码 颜色 分类" is-link />
          </van-cell-group>
      </div>
        

      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon icon="cart-o" text="购物车" to='/cars' />
        <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton1" />
        <van-goods-action-button type="danger" text="立即购买" @click="onClickButton2" />
      </van-goods-action>

    </div>
  </div>
</template>
<script>
  import * as api from '@/api/getProList.js';
  import * as post from '@/api/postProList.js'
export default{
    name:'summerDetail',
    data () {
      return {
        product:{},
        quantity:0
      }
    },
    mounted(){
      let id = this.$route.query.id;
      api.getProInfo({id}).then(res=>{
        if(res.status == '200'){
          this.product = res.data;
        }else{
        }
      })
    },
    methods:{
      onClickIcon(){

      },
      onClickButton1(){
        post.addCars({
          quantity:this.quantity,
          product:this.product._id,
        }).then(res=>{
          if(res.status == 200){
            this.$toast(res.data.message)
          }else{
          }
        })
      },
      onClickButton2(){

      },
      onClickLeft (){
          this.$router.push('/index')
      },
    }
}
</script>
<style scoped>

.price{
  font-size: 18px;
  color: red;
  margin-bottom: 5px;
  text-align: left;
  margin-left: 10px;
}
.desc{
  font-size: 14px;
  text-align: left;
  margin-left: 15px;
  padding-bottom: 8px;
}
.tit{
  font-size: 14px;
  text-align: left;
  margin-left: -200px;
}
.name{
  font-size: 16px;
  text-align: left;
  margin-left: 15px;
  margin-bottom: 5px;
}
.manjian{
  margin-top: 2px;
  height: 32px;
  font-size: 12px;
  line-height: 12px;
}
.num{
  text-align: right;
  margin-right: 15px;
}
.cent{
  margin-bottom: 50px;
}
.zz{
  text-align: left;
}
.cx{
  font-size: 14px;
}
.tit1{
  font-size: 12px;
}
.fh{
  margin-top: 4px;
  margin-bottom: 4px;
}

</style>
